<template>
   <el-row :gutter="10" class="topInfo">
      <el-col :span="6">
         <div id="countNumDiv" class="el-colDiv">
            <div id="ssv1-main-text" class="nowDiv">实时</div>
            <span class="title">类目商品总数</span><br>
            <hr style="color: aliceblue;">
            <span class="digital">{{ cateproData.cateCount }}</span><br><br>
            <span class="last-span">当前分类总记录数</span><br>
         </div>
      </el-col>
      <el-col :span="6">
         <div id="haveCateDiv" class="el-colDiv">
            <div id="ssv2-main-text" class="nowDiv">实时</div>
            <span class="title">今日新增类目数</span><br>
            <hr style="color: aliceblue;">
            <span class="digital">{{cateproData.todayCount}}</span><br><br>
            <span class="last-span">当前分类总记录数</span><br>
         </div>
      </el-col>
      <el-col :span="6">
         <div id="ProductNum" class="el-colDiv">
            <div id="ssv3-main-text" class="nowDiv">实时</div>
            <span class="title">商品总数量</span><br>
            <hr style="color: aliceblue;">
            <span class="digital">{{ cateproData.productCount }}</span><br><br>
            <span class="last-span">当前商品总记录数</span>
         </div>
      </el-col>
      <el-col :span="6">
         <div id="emptyNum" class="el-colDiv">
            <div id="ssv3-main-text" class="nowDiv">实时</div>
            <span class="title">今日新增商品数</span><br>
             <hr style="color: aliceblue;">
            <span class="digital">{{ cateproData.protodayCount }}</span><br><br>
            <span class="last-span">当前商品总记录数</span>
         </div>

      </el-col>
   </el-row>
   <div id="main" style="width:100%; height: 360px;"></div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { CategoryProductApi } from '../api/index'
import * as echarts from 'echarts';
const cateproData=reactive({
   cateCount: 0,
   todayCount: 0,
   productCount: 0,
   protodayCount:0
})

onMounted(() => {
   CallCategoryProductApi()
   // initCart()
   CallPreCountApi()
})

const CallCategoryProductApi = () => {
   CategoryProductApi.cateCount.call().then((res: any) => {
      console.log(res)
      cateproData.cateCount = res
      console.log(cateproData.cateCount);
      
   })
   CategoryProductApi.todayCount.call().then((res: any) => {
      cateproData.todayCount = res
   })
   CategoryProductApi.proCount.call().then((res: any) => { 
      cateproData.productCount = res
   })
   CategoryProductApi.protodayCount.call().then((res: any) => {
      cateproData.protodayCount = res
   })
}

const initCart =(data:any)=>{
   const myChart = echarts.init(document.getElementById('main'))
   let option = {
      title: {
         text: '类目商品统计图',
         subtext: '统计维度：商品类目',
         left: 'center'
      },
      tooltip: {
         trigger: 'item'
      },
      series:[
         {
            name:'商品类目',
            type:'pie',
            radius: '50%',
            data: data,
            emphasis: {
               itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
            }
         }
      ]
   }
option && myChart.setOption(option)
}
const CallPreCountApi = () => {
   CategoryProductApi.pieCount.call().then((res: any) => {
      console.log(res)
      initCart(res)
   })
}
</script>

<style scoped>
.topInfo {
   margin: 0 auto;
}
.el-colDiv{
   max-width: 440px;
   min-width: 200px;
   overflow: hidden;
   height: 115px;
   border-radius: 10px;
   background-color: black;
   color: white;
   padding-left: 15px;
   padding-top: 15px;
   position: relative;
   
}

.nowDiv{
   width: 40px;
   height: 20px;
   position: absolute;
   top: 2;
   right: 6%;
   font-size: 16px;
   font-weight: 700;
   display: flex; 
   justify-content: center;
   align-items: center;
   border-radius: 4px;
}
.title{
   font-size: 18px;
   /* margin-top: 5px; */
}
.digital{
   font-size: 25px;
   line-height: normal;
   margin-left: 2px;
   margin-top: 5px;
}

.last-span{
   font-size: 14px;
   margin-top: 5px;
}

#countNumDiv{
   background-color: #0084ff;
}
#ssv1-main-text{
   background-color: #db0c70;
}
#haveCateDiv{
   background-color: #36a3f7;
}
#ssv2-main-text {
   background-color: #db0c70;
}
#ProductNum{
   background-color: #11cdef;
}
#ssv3-main-text {
   background-color: #db0c70;
}
#emptyNum{
   background-color: #36d7b7;
}
#ssv4-main-text {
   background-color: #db0c70;
}
/* .el-row {
   margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
}
}
.el-col {
   border-radius: 4px;
} */
</style>